<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui测试</title>
    <link rel="stylesheet" href="css/base.css?v=4"/>
    <link rel="stylesheet" href="css/common.css?v=4"/>
    <style>
        html, body {

        }
        /**
        一、设置scrollDom：body为滚动元素（默认就是body）
        1、body或者子元素要设置高度，如果不设置高度，container.scrollHeight()和container.height()相等，只要滚动就会出发ajax（不会滚动到距离底部多少才加载数据）
        2、在设置高度的元素上，不能设置overflow: scroll，否则可能滚动无效;
        二、设置scrollDom：其它元素
        1、设置scrollDom设置高度，如果不设置高度滚动会失效
        2、在设置高度的元素上，需要设置overflow: scroll，否则可能滚动无效;
        3、可用使用flex column布局，不用计算高度，可以刚刚好铺满一屏幕
        */
        body {
            /*height: 100vh;*/
        }

        .page {
            flex-direction: column;
            height: 100vh;
            text-align: left;
        }

        .other {
            border-bottom: 1px solid #f3f3f3;
        }

        .infinite {
            overflow: scroll;
        }


        .order-list  {
            /*height: 800px;*/
            /*overflow: scroll;*/
        }

        .order-list .order-items {
            border-bottom: 1px solid #f3f3f3;
            color: #565656;
            position: relative;
            padding: 10px 15px;
        }

        .order-list .order-items .item {
            padding: 1px 0;
        }

        .order-list .order-items .tt {

        }

        .order-list .order-items .paymoney {

        }

        .order-list .order-items .go-detail {
            border-radius: 15px;
            bottom: 18px;
            font-size: 12px;
            right: 15px;
            position: absolute;
        }

        .weui-loadmore {
            text-align: center;
        }

        .weui-infinite-scroll {
            height: 24px;
            line-height: 24px;
            padding: 10px;
            text-align: center;
        }

        .weui-infinite-scroll .infinite-preloader {
            display: inline-block;
            margin-right: 4px;
            vertical-align: -4px;
            width: 20px;
            height: 20px;
            -webkit-transform-origin: 50%;
            transform-origin: 50%;
            -webkit-animation: preloader-spin 1s steps(12, end) infinite;
            animation: preloader-spin 1s steps(12, end) infinite;
        }

        .weui-infinite-scroll .infinite-preloader:after {
            display: block;
            width: 100%;
            height: 100%;
            content: "";
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
        }

        @-webkit-keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <script src="layer3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div class="page flex-box">
    <div>
        Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendreritQuisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendreritQuisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus
        quis nibh hendrerit
    </div>
    <div class="order-list flex1">
        <div class='content-padded' id="order-view">
            <template>
                <p class="item"><span class="tt">订单编号：</span>32021051816475699</p>
                <p class="item"><span class="tt">消费时间：</span>2021-05-14 09:23:41</p>
                <p class="item"><span class="tt">消费金额：</span><span class="din warning paymoney">4</span>点
                </p>
                <span class="go-detail btn btn-warn-bd btn-mini" data-orderno="32021051816475699">查看详情</span>
            </template>
        </div>
        <div class="weui-loadmore hide">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
</div>
<script>
    $('#order-view').listview({
        "url":"http://rap2api.taobao.org/app/mock/278020/example/orderlist",
        "classWrapper": "listviews",
        "classItem": "order-items",
        "isScrollPage":true,
        // "scrollDom":'.order-list',
        "isPulltorefresh":false,
        "pulltorefreshDom":null,
        "empty":false,
        "keyEach": 'List',
        "itemTap": function (listitem, dataitem, datasource, event) {
            console.log(listitem)
            console.log(dataitem)
            console.log(datasource)
            console.log(event)
        },
        "loadsuccess":function (data){

        }
    });
</script>
</body>
</html>
